<template>
<div>
   <V-CommonHeaderLeft>
     <div id="app" :class="{active:isActive}">
    <el-row>
      <!-- 头部 -->
      <div class="header">
        <el-col :span="5" class="header-nav">
          <router-link to="/">首页&nbsp;&nbsp;/</router-link>
          <router-link to="/">营销&nbsp;&nbsp;/</router-link>
          <router-link to="/">订单促销&nbsp;&nbsp;/</router-link>
          <router-link to="/">新增订单促销</router-link>
        </el-col>
      </div>
    </el-row>
    <!-- 第二部分 -->
    <div class="contents">
      <div class="contents-header">
        <h3>促销详情</h3>
      </div>
      <el-row>
        <el-col :span="3">
          <div class="contents-left">
            <p>预售标题</p>
            <p>预售时间</p>
            <p>发货时间</p>
            <p>客户类型</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="contents-right">
            <el-input
              type="text"
              placeholder="请输入内容"
              v-model="text"
              maxlength="10"
              show-word-limit
              class="maxInput"
            ></el-input>
            <!--选择日期-->
            <el-col :span="3">
              <el-form>
                <div class="contents-select-data">
                  <el-date-picker
                    style="width:505px;height:40px;"
                    v-model="value1"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
              </el-form>
            </el-col>
            <!--/选择日期-->
            <div class="data">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期" class='data-picker'></el-date-picker>
            </div>
            <!-- 全选 -->
            <div class="checkAll">
              <el-checkbox
                :indeterminate="isIndeterminate"
                v-model="checkAll"
                @change="handleCheckAllChange"
              >全选</el-checkbox>
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="info">
        【说明】1、将对以下每一个商品分别应用促销规则。
        2、多单位商品只能基于基本单位创建商品促销活动
      </div>
      <div class="table">
        <el-row class="table-one">
          <el-col :span="2">序号</el-col>
          <el-col :span="2">规格图</el-col>
          <el-col :span="7">商品名称/商品编号</el-col>
          <el-col :span="6">规格名称/规格编号</el-col>
          <el-col :span="3">单位</el-col>
          <el-col :span="4">销售价</el-col>
        </el-row>
        <el-row class="table-two" v-for="(site,key) in list" :key="key">
          <el-col
            :span="2"
            class="xuhao"
            style="border:1px solid #E3E3E3;border-top:0;border-right:0"
          >{{++key}}</el-col>
          <el-col
            :span="2"
            style="border-left:1px solid #E3E3E3;border-bottom:1px solid #e3e3e3"
          >{{site.url}}</el-col>
          <el-col
            :span="7"
            style="text-align:left;padding-left:10px;border:1px solid #e3e3e3;border-right:0;border-top:0"
          >
            <span>{{site.goodsName}}</span>
            <span>{{site.goodsBian}}</span>
          </el-col>
          <el-col :span="6" style="border:1px solid #E3E3E3;border-right:0;border-top:0;">
            <span>{{site.guiName}}</span>
            <span>{{site.guiBian}}</span>
          </el-col>
          <el-col
            :span="3"
            style="border:1px solid #E3E3E3;border-right:0;border-top:0;"
          >{{site.dan}}</el-col>
          <el-col
            :span="4"
            style="border:1px solid #E3E3E3;border-right:0;border-top:0;"
          >￥{{site.price}}</el-col>
        </el-row>
        <el-row class="list-row">
          <el-col :span="12" :offset="10">
            <span @click="placeChoose()" class="span-list">+添加商品规格清单</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 弹出框：请选择商品 -->
    <div class="chooseTan" v-if="showTan" :class="{active2:isActive2}">
      <div class="h">
        <h3>请选择赠品</h3>
        <p @click="closeTan()">x</p>
      </div>
      <div class="chooseTan-header">
        <input type="search" placeholder="请输入商品名称|商品编号|规格">
        <input type="search" placeholder="请选择分类" @click="chooseSelect()">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick()"
          v-if="showTree"
          class="elTree"
        ></el-tree>
        <div class="kong" @click="chooseSelect2()"></div>
      </div>
      <div class="chooseTan-data">
        <el-row class="choose-row">
          <el-col :span="3">规格图</el-col>
          <el-col :span="8" :offset="1">商品名称|商品编号</el-col>
          <el-col :span="4" :offset="1">规格名称|规格编号</el-col>
          <el-col :span="2" :offset="2">售价</el-col>
        </el-row>
        <el-row class="choose-data" v-for="(site,key) in chooseData" :key="key">
          <el-col :span="3">
            <!-- <img src="{site.url}" alt> -->
            {{site.url}}
          </el-col>
          <el-col :span="8" :offset="1" class="spans">
            <span>{{site.goodsName}}</span>
            <span>{{site.goodsBian}}</span>
          </el-col>
          <el-col :span="4" :offset="1" class="spans">
            <span>{{site.stateName}}</span>
            <span>{{site.stateBian}}</span>
          </el-col>
          <el-col :span="2" :offset="2" style="line-height:50px">￥{{site.price}}</el-col>
        </el-row>
        <!-- 分页（作为公公模板引入） -->
      </div>
    </div>
    <div class="footer">
      <div class="footer-one"></div>
      <div class="footer-two">
        <router-link to="/">取消</router-link>
        <router-link to="/">保存</router-link>
      </div>
    </div>
  </div>
   </V-CommonHeaderLeft>
</div>
</template>

<script>
import VCommonHeaderLeft from './../common/vCommonHeaderLeft/VCommonHeaderLeft'
const cityOptions = ['至尊VIP', '钻石VIP', '金卡VIP', '银卡VIP', '测试']
export default {
  components: {
    VCommonHeaderLeft
  },
  data () {
    return {
      text: '',
      // 下拉菜单
      showTree: false,
      // 弹出框
      showTan: false,
      // 全局加罩
      isActive: false,
      isActive2: true,
      // 日期选择
      // checkbox的label点击的颜色
      isColor: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '买赠',
        desc: ''
      },
      // 全选
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      // 赠品选择弹出框：
      // 下拉菜单
      chooseData: [
        {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }, {
          url: '111',
          goodsName: '兰蔻小黑瓶',
          goodsBian: '1',
          stateName: '1',
          stateBian: '1',
          price: '100'
        }],
      data: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 最下方的列表
      list: [
        {
          url: '图片地址',
          goodsName: '现在沙发北欧风格沙发',
          goodsBian: '2645896+65',
          guiName: '100*100*240',
          guiBian: 'CSA-4506-A2',
          dan: '张',
          price: 5520
        }
      ]
    }
  },
  methods: {
    // 全选
    handleCheckAllChange (val) {
      this.checkedCities = val ? cityOptions : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.cities.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
    },
    // 下拉菜单
    handleNodeClick () {
    },
    // 选择下拉菜单
    chooseSelect () {
      this.showTree = true
    },
    chooseSelect2 () {
      this.showTree = false
    },
    // 打开弹框
    placeChoose () {
      this.showTan = true
      this.isActive = true
    },
    // 关闭弹框
    closeTan () {
      this.showTan = false
      this.isActive = false
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width:100%;
  background-color: #f2f5f7;
  height: 100%;
  padding: 15px 10px 0px 10px;
}
.header {
  height: 45px;
  .header-nav {
    line-height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
    a {
      color: #999999;
    }
    a:hover {
      color: #20ade5;
    }
  }
  .header-img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #dce4e7;
  }
}
.header-nav a:nth-child(4) {
  color: #333;
}
.header-nav a:nth-child(4):hover {
  color: #333;
}
.contents {
  padding: 0px 10px;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  height:430px;
}
.contents-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 45px 0px 25px;
}
.contents-header > h3 {
  color: #20ade5;
  font-size: 16px;
  letter-spacing: 1px;
  border-bottom: 2px solid #20ade5;
  width: 110px;
  padding-bottom: 15px;
  text-align: center;
}
.contents-left {
  color: #666;
  padding: 15px 0px 0px 35px;
  font-size: 14px;
}
.contents-left > p:nth-child(1) {
  line-height: 45px;
}
.contents-left > p:nth-child(2) {
  line-height: 65px;
}
.contents-left > p:nth-child(3) {
  line-height: 70px;
}
.contents-left > p:nth-child(4) {
  line-height: 52px;
}
.contents-right {
  color: #666;
  padding: 15px 0px 0px 0px;
}
.maxInput {
  width: 505px;
  display: block;
}
.contents-select-data {
  margin-top: 20px;
}
.demo-ruleForm {
  margin: 75px 0px 0px 0px;
}
.checkOne {
  display: flex;
  margin: 48px 0px;
}
.checkOne > input {
  width: 15px;
  height: 15px;
  border: 1px solid #20ade5;
  margin-top: 13px;
}
.checkOne > label {
  font-size: 12px;
  display: inline-block;
  text-indent: 1em;
  margin-top: 13px;
}
.color {
  color: #20ade5;
}
.data {
  margin-top:85px;
}
.data-picker /deep/ .el-input__inner {
  width:505px
}
.checkAll {
  display: flex;
  margin-top:30px;
}
.chooseTan {
  background-color: #fff;
  width: 1000px;
  height: 510px;
  margin: 0 auto;
  position: absolute;
  top: 430px;
  left: 100px;
  z-index: 5;
}
.h {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e3e3e3;
  height: 40px;
}
.h > h3 {
  font-weight: normal;
  margin-left: 40%;
  line-height: 40px;
}
.h > p {
  color: #7f7f7f;
  margin-left: 47%;
  cursor: pointer;
}
.chooseTan-header {
  padding: 15px 15px;
}
.chooseTan-header > input:nth-child(1) {
  display: inline-block;
  width: 270px;
  height: 30px;
  border: 1px solid #e3e3e3;
  text-indent: 1em;
}
.chooseTan-header > input:nth-child(2) {
  display: inline-block;
  width: 138px;
  height: 30px;
  border: 1px solid #e3e3e3;
  margin-left: 15px;
  text-indent: 1em;
}
.elTree {
  width: 138px;
  box-shadow: 0px 0px 5px 2px #eeeeee;
  margin: 1px 0px 0px 285px;
  position: absolute;
  z-index: 5;
}
.kong {
  width: 500px;
  display: inline-block;
  height: 20px;
}
.chooseTan-data {
  font-size: 12px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 345px;
}
.chooseTan-data span {
  display: block;
}
.choose-row {
  height: 50px;
  background-color: #fafafa;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  line-height: 50px;
  padding-left: 20px;
}
.choose-data {
  height: 60px;
  padding-left: 19px;
  border-bottom: 1px solid #e3e3e3;
}
.choose-data:hover {
  background-color: #f5f5f5;
}
.spans span {
  line-height: 25px;
}
// .active {
//   border: 1px solid;
//   opacity: 0.5;
// }
.active2 {
  border: 1px solid #bababa;
  opacity: 1 !important;
}
.info {
  margin: 20px 0px 0px 30px;
  color: #b3b3b3;
  font-size: 14px;
}
.table {
  width: 90%;
  color: #666;
  font-size: 12px;
  border-right: 1px solid #e3e3e3;
  margin: 15px 0px 0px 25px;
}
.table-one {
  height: 50px;
  background-color: #fcfcfc;
  line-height: 50px;
  text-align: center;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
}
.table-two {
  height: 75px;
  line-height: 75px;
  text-align: center;
}
.list-row {
  border: 1px solid #e3e3e3;
  border-top: 0;
  height: 50px;
  margin-top: 1px;
  border-right: 0;
  line-height: 50px;
}
.span-list {
  color: #20ade5;
  cursor: pointer;
}
.footer {
  background-color: #fff;
  padding: 50px 0px 0px 0px;
  height: 52px;
}
.footer-one {
  padding-top: 10px;
  border-top: 1px solid #e3e3e3;
}
.footer-two {
  display: flex;
  margin-left: 70%;
}
.footer-two a {
  display: block;
  width: 150px;
  height: 40px;
  color: #37b5e8;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.footer-two a:nth-child(1) {
  border: 1px solid;
}
.footer-two a:nth-child(2) {
  background-color: #37b5e8;
  color: #fff;
  margin-left: 10px;
}
</style>
